<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html>
	<head>
		<meta charset="utf-8" />
		<!-- 优先使用 IE 最新版本和 Chrome -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<!-- 为移动设备添加 viewport -->
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
		<!--忽略页面中的数字识别为电话，忽略email识别-->
		<meta name="format-detection" content="telphone=no, email=no" />
		<title>国际媒体话语分析平台-文章内容</title>
		<link rel="stylesheet" type="text/css" href="/css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="/css/base.css" />
		<!--[if lt IE 9]>
			<script type="text/javascript" src="/js/html5shiv.min.js"></script>
			<script type="text/javascript" src="/js/respond.min.js"></script>
	    <![endif]-->
		<link rel="stylesheet" type="text/css" href="/css/media.css" />
	    <style type="text/css">
		.news-detail{ padding-bottom:30px; }
        .news-detail img{ text-align: center; max-width: 100%;  display: block; margin:0px auto;}
        .page-box{border-top: 1px solid #f0f2f5; padding-top: 30px;}
        .page-box p{ display: inline-block; font-size: 16px; overflow: hidden;text-overflow:ellipsis; white-space:nowrap; }
        .page-box p:first-child{float: left;}
		.page-box p:last-child{float: right;}
	    </style>

		<link rel="stylesheet" type="text/css" href="/css/media.css" />
		<link rel="stylesheet" type="text/css" href="/res/layui/css/layui.css">

	</head>

	<body>
	<nav class="navbar navbar-default navbar-fixed-top top-box">
		<div class="container">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<h1><a class="navbar-brand" href="#">
					国际媒体话语分析平台
				</a></h1>
			</div>

			<div class="collapse navbar-collapse" >
				<ul class="nav navbar-nav navbar-right top-nav">
					<li >
						<a href="/page/index">
							平台首页
							<span class="sr-only">(current)</span>
						</a>
					</li>
					<li>
						<a href="/page/new-news">最新资讯</a>
					</li>
					<li>
						<a href="/page/new-hot">热点推荐</a>
					</li>
					<li>
						<a href="/page/new-search">信息检索</a>
					</li>
					<li class="search_c"><a href="#">搜索 <i class="glyphicon glyphicon-search"></i></a></li>
					<form>
						<input type="text"  id="keyword" name="keyword" class="form-control search" placeholder="请输入文章关键字或标题">
					</form>
				</ul>
			</div>
			<!-- /.navbar-collapse -->
		</div>
		<!-- /.container -->
	</nav>
		<!--/ 导航-->

		<!--广告图-->
		<div class="container-fluid page-banner">
			<div class="row">
				<img src="/img/4.jpg" alt="" class="img-responsive" />
			</div>
		</div>

		<!--文章列表 -->
		<div class="news">
			<div class="container">
				<div class="row">
					<div class="col-lg-3 col-md-3 col-sm-3 hidden-xs sidebar">
						<span class="open">展开栏目列表</span>
						<!--电脑端页面导航-->
						<ul>
							<span title="关闭栏目列表" class="colse"></span>
							<li class="sidebar-title">
								<a href="/page/index">
									<h3>平台首页</h3>
									<p> INDEX </p>
								</a>
							</li>
							<li class="sidebar-item">
								<a href="/page/new-hot"><span class="glyphicon glyphicon-circle"></span>&nbsp;热点推荐</a>
							</li>
							<li class="sidebar-item">
								<a href="/page/new-news"><span class="glyphicon glyphicon-circle"></span>&nbsp;&nbsp;最新资讯</a>
							</li>
						</ul>
					</div>
					<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12 right-content">
						<!--手机端页面导航-->
						<div class="mobile-nav hidden-md hidden-sm hidden-lg">
							<div class="mobile-nav-title">
								<a href="/page/index">
									<h3>平台首页</h3>
									<p> INDEX </p>
								</a>
							</div>
							<div class="mobile-nav-item clearfix">
								<a href="/page/new-hot"><span class="glyphicon glyphicon-circle"></span>&nbsp;热点推荐</a>
								<a href="/page/new-news"><span class="glyphicon glyphicon-circle"></span>&nbsp;最新资讯</a>
							</div>
						</div>
						<!--面包屑导航-->
					
						<ol class="breadcrumb bread">
							<li class="active">文章内容</li>
						</ol>
					
						<div class="news-detail">
							<div class="news-detail-title">
								<h2 th:text="${news.getTitle()}"></h2>
								<span th:text="${news.getTime()}"><i class="glyphicon glyphicon-time"></i>&nbsp;</span>
								<span ><i class="glyphicon"></i>来源:</span>
								<span th:text="${news.getSource()}"><i class="glyphicon glyphicon-eye-open"></i></span>
								<span th:text="${news.getCountry()}"><i class="glyphicon glyphicon-eye-open"></i></span>
								<a th:href="${news.getUrl()}" class="read-all">源地址</a>
							</div>
							<div class="news-detail-content">
								<p th:utext="${news.getContent()}"></p>
							</div>
						</div>	
							<!--分页-->
						<div class="page-box row">
							<div class="layui-card-header">
								<h3>词频统计(前20位)</h3>
							</div>
							<table class="layui-table">
								<colgroup>
									<col width="50%">
									<col width="50%">
								</colgroup>
								<thead>
								<tr>
									<th>单词</th>
									<th>次数</th>
								</tr>
								</thead>
								<tbody>
								<tr th:each="item,words:${keywords}">
									<td th:text="${words.current.key}"></td>
									<td th:text="${words.current.value}"></td>
								</tr>
								</tbody>
							</table>
						</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		</div>
	<div class="footer">
		国际化媒体话语分析平台
	</div>
	
		<script type="text/javascript" src="/js/jquery.js"></script>
		<script type="text/javascript" src="/js/bootstrap.js"></script>
		<script type="text/javascript" src="/js/nav.js"></script>
	    <script type="text/javascript" src="/js/search.js"></script>

	</body>

</html>